<template>
  <view class="work-stats">
    <view class="stats-header" 
	     :class="{ active: titleLeft }"
		>
      <text>{{ title }}</text>
    </view>
	
    <view class="stats-content">
      <view class="stats-item">
        <text class="stats-label">待完成</text>
        <image class="stats-icon" src="/static/my/service-pending.png" mode="aspectFit"></image>
        <text class="stats-number">{{ pendingCount }}</text>
      </view>
      <view class="stats-item">
        <text class="stats-label">已完成</text>
        <image class="stats-icon" src="/static/my/service-completed.png" mode="aspectFit"></image>
        <text class="stats-number">{{ completedCount }}</text>
      </view>
    </view>
    <view class="stats-footer" v-if="showIncome">
      <text class="income-text">预计收入：</text>
      <text class="income-amount">{{ income }}</text>
      <view class="income-view">
        <image class="income-icon" src="/static/my/income-sz.png" mode="aspectFit"></image>
        <text class="income-rate">{{ rate }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  titleLeft: {
	type: Boolean,
	default: false
  },
  title: {
    type: String,
    default: '本季度工单（2024第四季度）'
  },
  pendingCount: {
    type: [Number, String],
    default: 0
  },
  completedCount: {
    type: [Number, String],
    default: 0
  },
  showIncome: {
    type: Boolean,
    default: false
  },
  income: {
    type: [Number, String],
    default: '0'
  },
  rate: {
    type: String,
    default: '0%'
  }
})
</script>

<style scoped>
.work-stats {
  border-radius: 22rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 6px 0px rgba(173,173,173,0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.stats-header {
  margin-top:46rpx;
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
  margin-bottom: 52rpx;
 /* background-color: red; */
  width: 94%;
  text-align: center;
}
/*
.stats-header .active {
	 text-align: left;
	 padding-left: 42rpx;
	 margin-top: 30rpx;
	 margin-bottom: 42rpx;
}
*/

.stats-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 74rpx;
  width: 376rpx;
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stats-label {
  font-family: PingFangSC-Medium;
  font-size: 24rpx;
  color: #515151;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
  margin-bottom: 22rpx;
}

.stats-icon {
  width: 76rpx;
  height: 76rpx;
  margin-bottom: 28rpx;
}

.stats-number {
  font-family: PingFangSC-Semibold;
  font-size: 36rpx;
  color: #515151;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
}

.stats-footer {
  display: flex;
  align-items: center;
  margin-bottom: 66rpx;
}

.income-text {
  font-family: PingFangSC-Medium;
  font-size: 24rpx;
  color: #515151;
  letter-spacing: 0;
  font-weight: 500;
}

.income-amount {
  font-family: PingFangSC-Semibold;
  font-size: 36rpx;
  color: #515151;
  letter-spacing: 0;
  font-weight: 600;
  margin: 0 10rpx;
}

.income-view {
  display: flex;
  justify-content: space-between;
  background: #FF643E;
  border-radius: 9px;
  padding: 5rpx;
}

.income-icon {
  width: 22rpx;
  height: 16rpx;
  margin-right: 5rpx;
}

.income-rate {
  font-family: PingFangSC-Semibold;
  font-size: 16rpx;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
}
</style> 